<template>
    <a-modal 
        :title="$t('Edit')+$t('Block')" 
        v-model="osdmodify"
        @cancel='cancelhandle'
        width='35%'
        @ok='subm'
        :cancelText="$t('Cancel')"
        :okText="$t('Sure')"
        :maskClosable='false' v-dragModal
    >
        <!-- <a-spin tip="Loading...">
        </a-spin> -->
        <a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
        <a-form :form='form'>
            <a-form-item :label="$t('Block-name')" v-bind='formlayout' has-feedback>
                <a-input v-decorator="['osdname',{
                    rules:[{required:true,message:$t('Enter') + $t('Block-name')},
                    {pattern:namePattern,message:$t('Not_enter_special_characters')}],initialValue:tarname ? tarname.name : ''
                }]" :placeholder="tarname ? tarname.name : ''">
                </a-input>
            </a-form-item>
            <a-form-item :label="$t('Own-pool')" v-bind="formlayout">
                <a-select disabled v-decorator="['poolname',{
                    rules:[{required:true,message:$t('Choose') + $t('Own-pool')}],initialValue:tarname.pool_name
                }]">
                    <a-select-option :value='tarname.pool_name'>
                        {{tarname.pool_name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!--专用数据存储池-->
            <!-- <a-form-item v-bind="formlayout">
                <a-row>
                    <a-col :span='14' :offset='10'>
                        <a-checkbox v-decorator="['special']" disabled>
                            {{$t('Use')}}{{$t('Dedicated')}}
                        </a-checkbox>
                    </a-col>
                </a-row>
            </a-form-item> -->
            <a-form-item :label="$t('Data-pool')" v-bind="formlayout" v-if='form.getFieldValue("special")'>
                <a-select v-decorator="['numpool',{
                    rules:[{required:true,message:$t('Choose') + $t('Data-pool')}]
                }]">
                    <a-select-option v-for="(item,index) in $store.state.baseblock.data_pool" :value='item' :key="index">
                        {{item}}
                    </a-select-option>  
                </a-select>
            </a-form-item>
            <a-form-item :label="$t('Block-size')" v-bind='formlayout'>
                <a-row>
                    <a-col :span='12'>
                        <a-input-number
                            v-decorator="['size',{
                                rules:[{required:true,message:$t('Enter') + $t('Block-size')},{validator: checksize}],
                                initialValue:oldsize
                            }]"
                            :placeholder="$t('E-g')+'10'"
                            @change="handleInputNumToInt('size', $event)"
                            :min="1"
                        >
                        </a-input-number>
                    </a-col>
                    <a-col :span='12'>
                        <a-select v-decorator="['unit',{
                            rules:[{required:true,message:$t('Choose') + 'unit'},{validator: checksize}],initialValue:oldunit
                        }]" placeholder='KiB'>
                            <a-select-option v-for='u in unit ' :key='u.val'>{{u.label}}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
            </a-form-item>
            <!-- <a-form-item :label="$t('Select-strategy')" v-bind="formlayout">
                <a-select v-decorator="['strategy',{initialValue:tarname && tarname.strategy_id ? tarname.strategy_id : undefined}]" 
                        style="width: 100%"
                        :placeholder="$t('Strategy-tip')"
                        allowClear :disabled="isDisabledStrategy">
                         @change="handleChangeStripeSize" 注释
                    <a-select-option v-for="item in strategyData" :value="item.id" :key="item.id">
                        策略ID，创建时间，创建人，策略标识符 注释
                        {{idFormat(item.id)}}，{{item.create_time}}，{{item.username}}，{{item.identifier}}
                    </a-select-option>
                </a-select>
            </a-form-item> -->
        </a-form>
    </a-modal>
</template>
<script>
import { idFormat } from '@/untils/formatMethods'
import request from '@/request/request'

export default {
    name:'mosd',
    props:['mm','tarname', 'strategyData'],
    data(){
        return{
            form:this.$form.createForm(this),
            osdmodify:false,
            formlayout:{
                labelCol:{span:6},
                wrapperCol:{span:14}
            },
            unit:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
            oldunit:'',
            oldsize:'',
            spinning:false,
            isDisabledStrategy: false,
            // user_id: localStorage.getItem('user_id')
        }
    },
    watch:{
        mm(val){
            //判断当前选择的块设备是否有策略
            // if(this.tarname.strategy_id) { //如果有
            //     //判断是否为个人专用
            //     let isPersonal = false;
            //     isPersonal = this.strategyData.some(item => {
            //         return item.id == this.tarname.strategy_id;
            //     })
            //     if(!isPersonal) { //是个人专用
            //         this.isDisabledStrategy = true;
            //     }else {
            //         this.isDisabledStrategy = false;
            //     }
            // }else {
            //     this.isDisabledStrategy = false;
            // }
            this.osdmodify=val
            this.part()  //监听到局部变量的变化而变化
        },
    },
    methods:{
        cancelhandle(e){
            // this.osdmodify=false
            this.$emit('omodal',false, true)
            this.spinning = false
            this.form.resetFields();
        },
        subm(e){
            e.preventDefault();
            this.form.validateFields((err,value)=>{
                if(!err){
                    this.spinning = true
                    let name = this.tarname.name;
                    if(name.trim() == value.osdname.trim()) {
                        name = undefined;
                    }else {
                        name = value.osdname;
                    }
                    // this.$axios({
					// 	method: 'post',
					// 	url: this.allurl+'block/update',
					// 	data: {
                    //         id: this.tarname.id,  //要更改的块id
                    //         name: name, //要更改的块名称
                    //         block_name: this.tarname.name,//原块设备名
                    //         pool_id: this.tarname.pool_id, //要更改的池id
                    //         pool_name: this.tarname.pool_name,  //需要更改的池名
                    //         size: value.size,  //大小
                    //         unit: value.unit,  //单位
                    //         strategy_id: value.strategy
                    //         // pool:this.tarname.pool_name,
	                //   		// name:this.tarname.name,
	                //   		// replica_name:value.osdname,
	                //   		// replica_size:value.size,
	                //   		// unit:value.unit
	                //     }
                    // })
                    request('post', 'block/update', {
                        id: this.tarname.id,  //要更改的块id
                        name: name, //要更改的块名称
                        // block_name: this.tarname.name,//原块设备名
                        pool_id: this.tarname.pool_id, //要更改的池id
                        // pool_name: this.tarname.pool_name,  //需要更改的池名
                        size: value.size,  //大小
                        unit: value.unit,  //单位
                        // strategy_id: value.strategy
                    })
                    .then(res=>{
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
                        // this.osdmodify=false
                        this.spinning = false
						this.form.resetFields()  //重置弹窗
                    	this.$emit('omodal',false, false) //关闭弹窗
                    }).catch(err => {
                        this.spinning = false;
						this.form.resetFields();  //重置弹窗
                    	this.$emit('omodal',false, false); //关闭弹窗
                    })
                }
            })
        },
        checksize(rule, value, callback){ //禁止缩容
            console.log(callback)
            const form = this.form;
            let block_size = form.getFieldValue('size')
            let _unit = form.getFieldValue('unit')
            let _oldunit = ''
            switch(_unit){
                case 'KiB':block_size *= 1024; break; 
                case 'MiB':block_size *= 1024 * 1024; break; 
                case 'GiB':block_size *= 1024 * 1024 * 1024; break; 
                case 'TiB':block_size *= 1024 * 1024 * 1024 * 1024; break; 
            }
            switch(this.oldunit){
                case 'KiB':_oldunit = 1024; break; 
                case 'MiB':_oldunit = 1024 * 1024; break; 
                case 'GiB':_oldunit = 1024 * 1024 * 1024; break; 
                case 'TiB':_oldunit = 1024 * 1024 * 1024 * 1024; break; 
            }
            if(block_size < this.oldsize * _oldunit){
                this.$nextTick(() => {
                    this.form.validateFields(['unit']);
                    this.form.validateFields(['size']);
                    callback('提示：禁止缩小块设备容量')
                });
            } else{
                this.$nextTick(() => {
                    this.form.validateFields(['unit']);
                    this.form.validateFields(['size']);
                    callback();
                });
            }
        },
        part(){ //对容量进行 数值 和 单位的划分
        	this.change = this.tarname
    		this.oldsize = this.change.size.split(' ')[0]
    		this.oldunit = this.change.size.split(' ')[1]
        },

        //将id变成4位数 0001 0010 0100 1000
        idFormat(value) {
            return idFormat(value);
        },
        
        // 将小数向下取整
		handleInputNumToInt(type, value) {
			this.$nextTick(() => {
				this.form.setFieldsValue({
					[type]: Math.floor(value),
				})
			})
		},
    
    },
    mounted(){
    	
    }
}
</script>